<template>
  <view style="flex: 1; height: 100%" class="u-flex u-flex-y-center">
    <view class="openbtn" v-if="btnfalg" @click="show = true">
      {{ inputValue }}
    </view>
    <view v-else style="width: 100%; font-size: 28rpx" @click="show = true">
      {{ inputValue }}
    </view>
    <u-picker :show="show" :columns="columns" keyName="label" @confirm="confirm" @cancel="cancel"></u-picker>
  </view>
</template>

<script>
export default {
  name: "selectzitem",
  props: {
    value: {
      typeof: [String, Number],
      default: "",
    },
    options: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
    btnfalg: {
      typeof: Boolean,
      default: false,
    },
  },
  data() {
    return {
      show: false,
    };
  },
  computed: {
    columns() {
      return [this.options];
    },
    inputValue() {
      console.log(this.options, this.value);
      return (
        this.options.find((e) => (e.prop && e.prop == this.value) || (e.value && e.value == this.value))
          ?.label || "请选择"
      );
    },
  },
  methods: {
    confirm(e) {
      this.show = false;
      this.$emit("input", e.value[0].prop || e.value[0].value);
      this.$emit("change");
    },
    cancel() {
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.openbtn {
  display: flex;
  // justify-content: center;

  align-items: center;
  // height: 100%;
  border: 1px solid #e5e5e5;
  position: relative;
  height: 72rpx;
  padding: 0 20rpx;
  border-radius: 10rpx;
  width: 100%;

  .iconclear {
    position: absolute;
    right: 10rpx;
  }
}
</style>
